<template>
  <div>
    <el-descriptions :column="2">
      <!-- <el-descriptions-item label-class-name="end-label" label="事件标题">{{ info.title ?info.title :'-' }}</el-descriptions-item> -->
      <el-descriptions-item label-class-name="end-label" label="测评点位">{{ info.linear&&info.linear.name ?info.linear.name :'-' }}</el-descriptions-item>
      <!-- <el-descriptions-item label-class-name="end-label" label="姓名">{{ info.name?info.name :'-' }}</el-descriptions-item>
      <el-descriptions-item label-class-name="end-label" label="手机号">{{ info.phone ?info.phone :'-' }}</el-descriptions-item> -->
      <el-descriptions-item label-class-name="end-label" label="责任单位">{{ info.rpunit&&info.rpunit.name ?info.rpunit.name :'-' }}</el-descriptions-item>
      <el-descriptions-item label-class-name="end-label" label="来源 ">{{ info.souce?dict.event_souce.find(i=>i.value== info.souce).label :'-' }}</el-descriptions-item>
      <el-descriptions-item label-class-name="end-label" label="点位类型 ">{{ info.evaluationDtl?info.evaluationDtl.evaluation.evaluationItems :'-' }}</el-descriptions-item>
      <el-descriptions-item label-class-name="end-label" label="问题明细 ">{{ info.evaluationDtl?info.evaluationDtl.name :'-' }}</el-descriptions-item>
      <el-descriptions-item label-class-name="end-label" label="帮创单位 ">
        {{ info.assistanceUnit?info.assistanceUnit.map(i=>i.name).join('；') :'-' }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="end-label" label="事件地址 ">{{ info.point?info.point :'-' }}</el-descriptions-item>
      <el-descriptions-item label-class-name="end-label" label="事件描述 ">{{ info.eventDesc ?info.eventDesc :'-' }}</el-descriptions-item>
      <el-descriptions-item label-class-name="end-label imageDes" label="事件图片 ">
        <el-image
          v-for="(item,index) in info.attachments&&info.attachments.filter(i=>i.type==1)"
          :key="index"
          class="attachment-image"
          :src="host + item.url"
          :preview-src-list="info.attachments&&info.attachments.filter(i=>i.type==1).map(i=> host + i.url)"
        />
        <!-- <el-popover
             v-for="(item) in info.attachments&&info.attachments.filter(i=>i.type==1)"
            :key="item.id"
            :content="host+item.url"
            placement="top-start"
            title="路径"
            width="200"
            trigger="hover"
          >
            <a
              slot="reference"
              :href="host+item.url"
              class="el-link--primary"
              style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color: #1890ff;font-size: 13px;"
              target="_blank"
            >
            {{host+ item.url  }}
            </a>
          </el-popover>  -->
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { selectTEvent } from '@/api/system/tEvent'
export default {
  props: {
    id: {
      type: String,
      default: ''
    },
    info: {
      type: Object,
      default: () => {}

    },
    dict: {
      type: Object,
      default: () => {}

    }
  },
  data() {
    return {
      host: process.env.VUE_APP_BASE_API
      // info: this.copyinfo
      // info: { id: null, title: null, linearId: null, linearName: null, taskName: null, createTime: null, assistanceUnit: [], point: null, name: null, phone: null, status: null, longitude: null, latitude: null, eventDesc: null, extensionTime: null, rpunitId: null, souce: null, taskId: null }
    }
  },
  // dicts: ['event_status', 'event_souce'],
  watch: {
    // id: {
    //   deep: true,
    //   immediate: true,
    //   handler(val) {
    //     const params = { id: val }
    //     selectTEvent(params).then(res => {
    //       this.info = res
    //     })
    //   }
    // }
  }
}
</script>

  <style lang="scss" scoped>
  ::v-deep .displayinline+.el-descriptions-item__content{
    display: flex;
    flex-wrap: wrap;
  }
  ::v-deep .imageDes+ .el-descriptions-item__content{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
  }
  .attachment-image {
    width: 315px;
    height:215px;
    margin-left: 15px;
    margin-bottom: 15px;
  }
  </style>
